<template>
	<view class="wodedingdan">
		<view class="category">
			<view class="category-item" v-for="(item,index) in categoryList" :key="index" @click="handlecategory(index)">
				<view :class="categoryListIndex===index? 'active-category-item-name' : 'category-item-name'">{{item.name}}</view>
				<view class="xian" v-if="categoryListIndex == index"></view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" >
				<view class="" v-for="(tab,index1) in item.goodsList" :key="index1">
					<view class="shangpin">
						<image :src="tab.picUrl" @click.stop="handleshangpinxiangqing(tab.goodsId)"></image>
						<view class="shangpin-box">
							<view class="name">
								{{tab.goodsName}}
								<view class="tag-title" v-if="item.orderType == 1">
									<text>拼团</text>
								</view>
							</view>
							<view class="spec" v-if="tab.specifications.length >0">
								{{tab.specifications[0]}}
							</view>
							<view class="price">
								<text class="price-text" v-if="item.orderType == 0">￥{{tab.price}}</text>
								<view class="price-text" style="display: flex;" v-if="item.orderType == 1">
									拼团价 ￥{{item.groupProduct.groupBuyPrice}} 
									<text class="price through" style="margin-left: 10rpx;"> ￥{{item.goodsPrice}}</text>    
								</view>
								<text class="price-text1">x{{tab.number}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-box">
					<view class="bottom-box-left">{{item.orderStatusName}}</view>
					<view class="btn-box">
						<view class="btn" v-if="item.orderStatus == 0" @click.stop="handlexiangqing(item.id)">去支付，{{item.shengyutime}}分钟后取消</view>
						<view class="btn1" v-if="item.orderStatus == 1">等待发货</view>
						
						<view class="btn1" v-if="item.showLogistics" @click.stop="handlewuliu(item.id)">查看物流</view>
						<view class="btn2" v-if="item.orderStatus == 2" @click.stop="handlequerenshouhuo(item.id,index,item.freightType)">确认收货</view>
						
						<view class="btn2" v-if="item.orderStatus == 3" @click.stop="handlepingjia(item.id)">评价商品</view>
						<view class="btn1" v-if="item.orderStatus == 4">已完成</view>
						<view class="btn2" v-if="item.orderStatus == 6" @clicks.stop="handleshanchu(item.id,index)">删除订单</view>
						
						<view class="btn1" v-if="item.orderStatus != 0"  @click="handlexiangqing(item.id)">查看详情</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="loadmore" v-if="isLoadmore">
			<u-loadmore :status="status" :icon-type="flower"/>
		</view>
		<view class="empty" v-if="showEmpty">
			<!-- <image src="../../static/kzt_logo@2x.png" mode=""></image> -->
			<text>暂无数据</text>
		</view>
		
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tishi">
						提示
					</view>
					<view class="content">
						请上传取货照片
					</view>
					<!-- 上传图片 -->
					<view class="releaseGoodsItemUpload">
					  <view v-for="(item,index) in photoList" :key="index" class="photoListItem">
						<image class="photoListItemImg" :src="item" @click="ViewImage(photoList[index])"></image>
						<view class="delImage" @click="DelImg(index)">
						    <image src="http://juebai.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16147431265761867.png"></image>
						</view>
					  </view>
					  <image class="upload" @click="handleUpload" v-if="photoList.length < 3" src="../../static/sc_tp@2x.png" mode=""></image>
					</view>
					
					<view class="xian-box">
						<view class="xian">
							
						</view>
					</view>
					<view class="rect-btn">
						<view class="quxiao"  @click="show = false">
							取消
						</view>
						<view class="queding"  @click="sumbit">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	var uploadImage = require('../../common/uploadFile.js');//地址换成你自己存放文件的位置
	var util = require('../../common/formatTime.js');
	export default {
		data() {
			return {
				// TYPE0(0, "待支付"),
				// TYPE1(1, "待发货"),
				// TYPE2(2, "待收货"),
				// TYPE3(3, "待评价"),
				// TYPE4(4, "已完成"),
				// TYPE5(5, "已退款"),
				// TYPE6(6, "已取消"),
				// TYPE7(7,"售后审核中"),
				// TYPE8(8,"售后完成");
				categoryList:[{
					name:'全部',
					status:''
				},{
					name:'待支付',
					status:0
				},{
					name:'待发货',
					status:1
				},{
					name:'待收货',
					status:2
				},{
					name:'待评价',
					status:3
				},{
					name:'售后',
					status:-1
				}],
				categoryListIndex:0,
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				showEmpty:false,
				status: 'loading',
				isLoadmore:true,
				orderId:'',
				index:'',
				show:false,
				photoList:[],
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.status) {
				if (JSON.parse(options.status) == -1) {
					this.categoryListIndex = 5
				}else{
					this.categoryListIndex = JSON.parse(options.status)
				}
			}
			
		},
		onShow() {
			this.page = 1
			this.list = []
			this.getorderlist()
		},
		methods: {
			//订单列表
			async getorderlist(){
				const params = {
					page:this.page,
					size:this.size,
					status:this.categoryList[this.categoryListIndex].status
				}
				const res = await this.$u.api.orderList(params)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				this.status = 'nomore'
				this.list = [...this.list,...res.rows]
				this.list.forEach(v=>{
					if (v.orderStatus == 0) {
						v.shengyutime = this.$u.timeFormat(new Date(v.endTime) - new Date(), 'MM')
						
					}
				})
				console.log(this.list)
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				
				uni.stopPullDownRefresh()
			},
			//选择
			handlecategory(index){
				this.categoryListIndex = index
				this.page = 1
				this.list = []
				this.getorderlist()
			},
			//订单详情
			handlexiangqing(orderId){
				const params = 'orderId=' + orderId
				uni.navigateTo({
					url:'/pages/dingdanxiangqing/dingdanxiangqing?' + params
				})
			},
			//物流
			handlewuliu(orderId){
				const params = 'orderId=' + orderId
				uni.navigateTo({
					url:'/pages/wuliu/wuliu?' + params
				})
			},
			//删除订单
			async handleshanchu(orderId,index){
				const params = {
					orderId:orderId
				}
				const res = await this.$u.api.orderDel(params)
				this.$u.toast(res.msg)
				this.list.splice(index,1)
				if (this.list.length == 0) {
					this.showEmpty = true
				}
			},
			//商品详情
			handleshangpinxiangqing(goodsId){
				const params = 'goodsId=' + goodsId
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
				})
			},
			//确认收货
			async handlequerenshouhuo(orderId,index,freightType){
				if (freightType == 0) {
					const params  = {
						orderId:orderId
					}	
					const res = await this.$u.api.confirm(params)
					this.$u.toast(res.msg)
					if (this.categoryListIndex == 3) {
						this.list.splice(index,1)
						if (this.list.length == 0) {
							this.showEmpty = true
						}
					}
					if (this.categoryListIndex == 0) {
						let data = this.list[index]
						data.orderStatus == 4
						this.list.splice(index,1,data)
					}
				} else{
					this.index = index
					this.orderId = orderId
					this.show = true
				}
				
			    
			},
			//上传图片
			  handleUpload(){
			    var that = this;
			    uni.chooseImage({
			      count: 9, // 默认最多一次选择9张图
			      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			      //sourceType: ['album'],
			      success: function (res) {
			        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
			        var tempFilePaths = res.tempFilePaths;
					console.log(res.tempFilePaths)
			        var nowTime = util.formatTime(new Date());
			        //支持多图上传
			        console.log(res.tempFilePaths,12)
			        for (var i = 0; i < res.tempFilePaths.length; i++) {
			          //显示消息提示框
			          uni.showLoading({
			            title: '上传中' + (i + 1) + '/' + res.tempFilePaths.length,
			            mask: true
			          })
			          //上传图片
			          //你的域名下的/cbb文件下的/当前年月日文件下的/图片.png
			          //图片路径可自行修改
			          // uploadImage(res.tempFilePaths[i], 'bad/' + nowTime + '/',
			          uploadImage(res.tempFilePaths[i], 'loveFruit/',
			            function (result) {
			              console.log("======上传成功图片地址为：", result);
			              //做你具体的业务逻辑操作
						  that.photoList = that.photoList.concat(result.split(','))
			              uni.hideLoading();
			           }, function (result) {
			            console.log("======上传失败======", result);
			            //做你具体的业务逻辑操作
			                   uni.hideLoading()
			                }
			             )
			          }
			       }
			    })
			},
			ViewImage(url) {
			    uni.previewImage({
			      urls: this.photoList,
			      current: url
			    });
			},
			DelImg(index) {
			    this.photoList.splice(index, 1);
			    
			},
			//自提订单确认收货
			async sumbit(){
				if (this.photoList.length == 0) {
					this.$u.toast('请上传取货照片')
					return
				}
				const params  = {
					orderId:this.orderId,
					takeImg:JSON.stringify(this.photoList)
				}	
				const res = await this.$u.api.confirm(params)
				this.show = false
				this.$u.toast(res.msg)
				if (this.categoryListIndex == 3) {
					this.list.splice(this.index,1)
					if (this.list.length == 0) {
						this.showEmpty = true
					}
				}
				if (this.categoryListIndex == 0) {
					let data = this.list[this.index]
					data.orderStatus == 4
					this.list.splice(this.index,1,data)
				}
			},
			//评价
			handlepingjia(orderId){
				const params = 'orderId=' + orderId
				uni.navigateTo({
					url:'/pages/pingjia/pingjia?' + params
				})
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getorderlist()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getorderlist()
				},600)
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>
<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    .category{
    	width: 750rpx;
    	padding: 28rpx 40rpx 0rpx 40rpx;
    	background: white;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 10;
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    }
    .category-item{
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    }
    .active-category-item-name{
    	font-size: 28rpx;
    	font-family: PingFang SC-Bold, PingFang SC;
    	font-weight: bold;
    	color: #333333;
    	line-height: 32rpx;
    }
    .category-item-name{
    	font-size: 28rpx;
    	font-family: PingFang SC-Bold, PingFang SC;
    	font-weight: 400;
    	color: #333333;
    	line-height: 32rpx;
    }
    .xian{
    	margin-top: 28rpx;
    	width: 40rpx;
    	height: 4rpx;
    	background: #333333;
    	border-radius: 0px 0px 0px 0px;
    }
	.list{
		padding: 124rpx 0rpx 28rpx 0rpx;
	}
	.item{
		padding:0rpx 28rpx 28rpx 28rpx;
		background: white;
		margin-bottom: 28rpx;
	}
	.shangpin{
		display: flex;
		flex-direction: row;
		padding: 28rpx 0rpx 24rpx 0rpx;
	    border-bottom: 0.5px solid #EFEFEF;
	}
	.shangpin image{
		width: 204rpx;
		height: 204rpx;
	}
	.shangpin-box{
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.name{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.spec{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.price{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.price-text{
		font-size: 32rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}
	.through { 
		text-decoration: line-through;
		color: gray; 
	}
	
	.price-text1{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.bottom-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 28rpx;
	}
	.bottom-box-left{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 34rpx;
	}
	.btn-box{
		
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.btn{
		padding: 14rpx 48rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 32rpx;
	}
	.btn1{
		width: 180rpx;
		height: 68rpx;
		border-radius: 0px 0px 0px 0px;
		border: 1px solid #5D22BA;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #5D22BA;
		line-height: 68rpx;
		text-align: center;
		margin-left: 16rpx;
	}
	.btn2{
		margin-left: 16rpx;
		width: 180rpx;
		height: 68rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 0px 0px 0px 0px;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
	}
	.tag-title{
		border: 1rpx solid #5D22BA;
		border-radius: 30rpx;
		width: 100rpx !important;
		text-align: center;
		margin: 10rpx;
	}
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
	.loadmore{
		padding-bottom: 40rpx;
	}
	
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 80%;
		// background: #081945;
		// box-shadow: inset 0px 0px 25px 0px #045174;
		background: white;
		border-radius: 10px 10px 10px 10px;
		border-radius: 10px;
	}
	.tishi{
		padding: 30rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 42rpx;
	}
	.content{
		padding: 30rpx 0rpx 40rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 42rpx;
		border-bottom: 0.5px solid rgba(0,0,0,0.05);
	}
	.xian-box{
		padding: 0rpx 30rpx;
	}
	.xian{
		width: 100%;
		height: 0px;
		opacity: 0.2;
		border: 0.5rpx solid #FFFFFF;
	}
	.rect-btn{
		display: flex;
		flex-direction: row;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}
	.quxiao{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 42rpx;
	}
	.queding{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}
	
	
	.releaseGoodsItemUpload{
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	  flex-wrap: wrap;
	  padding: 50rpx 28rpx;
	}
	.photoListItem{
	  width: 140rpx;
	  height: 140rpx;
	  position: relative;
	  margin: 0rpx 20rpx 20rpx 0rpx;
	}
	.photoListItemImg{
	  width: 140rpx;
	  height: 140rpx;
	  border-radius: 10px;
	}
	.delImage image{
	  width: 40rpx;
	  height: 40rpx;
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	.upload{
	  margin-bottom: 24rpx;
	  width: 140rpx;
	  height: 140rpx;
	}.releaseGoodsItemUpload{
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  padding: 50rpx 28rpx;
	}
	.photoListItem{
	  width: 140rpx;
	  height: 140rpx;
	  position: relative;
	  margin: 0rpx 20rpx 20rpx 0rpx;
	}
	.photoListItemImg{
	  width: 140rpx;
	  height: 140rpx;
	  border-radius: 10px;
	}
	.delImage image{
	  width: 40rpx;
	  height: 40rpx;
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	.upload{
	  margin-bottom: 24rpx;
	  width: 140rpx;
	  height: 140rpx;
	}.releaseGoodsItemUpload{
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  padding: 50rpx 28rpx;
	}
	.photoListItem{
	  width: 140rpx;
	  height: 140rpx;
	  position: relative;
	  margin: 0rpx 20rpx 20rpx 0rpx;
	}
	.photoListItemImg{
	  width: 140rpx;
	  height: 140rpx;
	  border-radius: 10px;
	}
	.delImage image{
	  width: 40rpx;
	  height: 40rpx;
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	.upload{
	  margin-bottom: 24rpx;
	  width: 140rpx;
	  height: 140rpx;
	}.releaseGoodsItemUpload{
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  padding: 50rpx 28rpx;
	}
	.photoListItem{
	  width: 140rpx;
	  height: 140rpx;
	  position: relative;
	  margin: 0rpx 20rpx 20rpx 0rpx;
	}
	.photoListItemImg{
	  width: 140rpx;
	  height: 140rpx;
	  border-radius: 10px;
	}
	.delImage image{
	  width: 40rpx;
	  height: 40rpx;
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	.upload{
	  margin-bottom: 24rpx;
	  width: 140rpx;
	  height: 140rpx;
	}
</style>
